<template>
    <div class="pandect w-100 d-flex between align-item-center">
        <div class="messageBord w-90">
            <a-card title="最新通知" style="width: 100%">
                <div style="height: 145px;">
                    目前没有什么通知.....
                </div>
            </a-card>
        </div>
        <div class="messageBord statisticBord w-40">
            <div style="padding: 5px">
                <a-row :gutter="[12, 12]">
                    <a-col :span="12" v-for="item in 4" :key="item">
                        <a-card>
                            <a-statistic
                                title="Feedback"
                                :value="11.28"
                                :precision="2"
                                suffix="%"
                                :value-style="{ color: '#3f8600' }"
                                style="margin-right: 50px"
                            >
                                <template #prefix>
                                    <arrow-up-outlined />
                                </template>
                            </a-statistic>
                        </a-card>
                    </a-col>
                </a-row>
            </div>
        </div>
    </div>
    <div class="echarts_contrast h-300 border-r5">
        <Contrast />
    </div>
    <div class="w-100 pt-10 d-flex between">
        <div class="w-70">
            <div class="salerTable w-100 d-flex start">
                <div class="tableBox w-100">
                    <sales-man></sales-man>
                </div>
            </div>
            <div class="w-100 pt-20">
                <messaeg-board></messaeg-board>
            </div>
        </div>
        <div class="border-r5 w-30 ml-20 overHidden">
            <div class="echarts_best w-100">
                <BestVolume />
            </div>
            <div class="branchShop w-100 mt-25 border-r5">
                <div class="imageBox w-100 border-r5 overHidden">
                    <img class="w-100 imageItem" src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png" alt="">
                </div>
                <div class="title h-50 relative">
                    <div class="avatar width-70 h-70 p-5 border-r50 border absolute">
                        <img class="itemAvatar w-100 height100 border-r50 " src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif" alt="">
                    </div>
                    <div class="title_text size-26 absolute weight">
                        <span>Branch construction</span>
                    </div>
                </div>
                <div class="progress p-10">
                    <div>
                        <a-tag color="processing">
                            <template #icon>
                                <sync-outlined :spin="true" />
                            </template>
                            高新店
                        </a-tag>
                        <a-progress :percent="56" />
                    </div>
                    <div class="mt-15">
                        <a-tag color="success">
                            <template #icon>
                                <check-circle-outlined />
                            </template>
                            犀浦店
                        </a-tag>
                        <a-progress :percent="100" />
                    </div>
                    <div class="mt-15">
                        <a-tag color="processing">
                            <template #icon>
                                <sync-outlined :spin="true" />
                            </template>
                            国外分店
                        </a-tag>
                        <a-progress :percent="32" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="w-100 mt-10 d-flex between">
        <div class="barEcharts background-white w-40 p-15 border-r5">
            <Consumer />
        </div>
        <div class="ml-10 w-100 border-r5">
            <a-card title="临期或过期产品" class="border-r5">
                <template #extra>
                    <a @click="overDateDue">过期</a>
                    <a class="ml-20" @click="isDateDue">临期</a>
                    <a class="ml-20" @click="all">全部</a>
                </template>
                <a-table :columns="columns" :data-source="overData" :scroll="{ y: 240 }">
                    <template #bodyCell="{ column, record }">
                        <template v-if="column.key === 'isOverdue'">
                            <span>
                                <a-tag v-for="item in record.isOverdue" :key="item" :color="item === '2' ? 'volcano' : 'warning'">
                                    <span v-if="item == 2">过期</span>
                                    <span v-else>临期</span>
                                </a-tag>
                            </span>
                        </template>
                        <template v-else-if="column.key === 'actions'">
                            <a @click="delItem(record.id)">处理完成</a>
                        </template>
                    </template>
                </a-table>
            </a-card>
        </div>
    </div>
</template>
<script>
import { defineComponent, onMounted, reactive } from 'vue'
import Contrast from './components/Contrast.vue'
import SalesMan from './components/SalesMan.vue'
import WaresList from './components/WaresList.vue'
import BestVolume from './components/bestSales.vue'
import MessaegBoard from './components/MessageBoard.vue'
import Consumer from './components/consumer.vue'
import { getHomeData, getOverDue, del } from '@/api/home/index'
const columns = [{
  title: 'Name',
  dataIndex: 'name',
  width: '50%',
}, {
  title: '过期/临期',
  dataIndex: 'isOverdue',
  key: 'isOverdue',
  width: '30%',
}, {
  title: '操作',
  dataIndex: 'actions',
  key: 'actions'
}];

export default defineComponent({
    components: {
        Contrast,
        SalesMan,
        WaresList,
        BestVolume,
        MessaegBoard,
        Consumer
    },
    setup() {
        const allData = reactive([])
        let overData = reactive([])
        onMounted(() => {
            getHomeData().then(res => {
                res.data.result.map(el => {
                    allData.push(el)
                })
            })
            getOverDueList()
        })

        // 临期或过期
        const getOverDueList = () => {
            getOverDue().then(res => {
                res.data.result.forEach(el => {
                    overData.push(el)
                })
            })
        }
        // 过期操作
        const overDateDue = () => {
            getOverDue().then(res => {
                let over = res.data.result.filter(item => item.isOverdue * 1 === 2)
                overData.length = 0
                over.forEach(el => {
                    overData.push(el)
                })
            })
        }
        //临期操作
        const isDateDue = () => {
            getOverDue().then(res => {
                let over = res.data.result.filter(item => item.isOverdue * 1 === 1)
                overData.length = 0
                over.forEach(el => {
                    overData.push(el)
                })
            })
        }
        // 全部
        const all = () => {
            getOverDue().then(res => {
                overData.length = 0
                res.data.result.forEach(el => {
                    overData.push(el)
                })
            })
        }
        //删除
        const delItem = id => {
            del(id).then(res => {
                overData.length = 0
                res.data.overDelList.forEach(el => {
                    overData.push(el)
                })
            })
        }

        return {
            allData,
            overData,
            columns,
            overDateDue,
            isDateDue,
            all,
            delItem
        }
    },
})
</script>

<style lang="scss" scoped>
.pandect_item {
    background-color: #fff;
}
.icon {
    font-size: 50px;
}
.viper {
    color: #40C9C6;
}
.message {
    color: #36A3F7;
}
.money {
    color: #F4516C;
}
.shop {
    color: #34BFA3;
}
.title {
    color: #8C8C8C;
    margin-bottom: 0;
}
.data {
    margin-bottom: 0;
}
.echarts_contrast {
    background-color: #fff;
}
.echarts_best {
    background-color: #fff;
    height: 328px;
}
.imageItem {
    height: 205px;
}
.branchShop {
    @extend .pandect_item;
}
.avatar {
    @extend .pandect_item;
    top: -30px;
    left: 20px;
}
.title_text {
    right: 30px;
    top: 10px;
    color: #4DD9D8;
}
.barEcharts {
    height: 466px;
    padding-top: 10px;
}
.ant-statistic {
    line-height: 33px !important;
}
</style>
